
import { getIndustry, getSkillLabel } from '@/services';
import { IndustryQuery, ISkillLabel } from '@/utils/interface';
import { FC, useEffect, useState } from 'react';
import { Input, Pagination, message } from 'antd';
import { StarOutlined, FormOutlined } from '@ant-design/icons'
import styles from './projectKu.less';
import { getProjectList } from '@/utils/students/projectKu';
import { getList } from '@/services/modules/students/projectKu';
import { IRouteComponentProps } from 'umi';
import useStore from '@/context/useStore';
import { observer } from 'mobx-react-lite'
const sxtype = ['生产实训', '教学实训', '专业群实训'];
const type = [
    { name: '全部', sxType: '' },
    { name: '生产实训', sxType: '1' },
    { name: '教学实训', sxType: '2' },
    { name: '专业群实训', sxType: '3' }
];
const arr = ['综合', '最新', '最热'];
const projectKu: FC<IRouteComponentProps> = ({ history }) => {
    let { projectKu } = useStore()
    //类型高亮
    let [curTypes, setcurTypes] = useState('');
    //获取行业标题
    let [curIndustry, setcurIndustry] = useState<IndustryQuery[]>([]);
    useEffect(() => {
        getIndustry().then(ok => {
            if (ok.code == 200) {
                setcurIndustry([{
                    children: null,
                    value: "",
                    label: "全部",
                    parentId: "A0000",
                }, ...ok.data])
            }
        })
    }, []);
    //行业高亮
    let [IndustryActive, setIndustryActive] = useState('');
    //专业高亮
    let [curSkill, setCurSkill] = useState('');
    //获取专业标题
    let [skillLabel, setSkillLabel] = useState<ISkillLabel[]>([]);
    useEffect(() => {
        getSkillLabel().then(ok => {
            if (ok.code == 200) {
                setSkillLabel([{
                    children: null,
                    id: "",
                    name: "全部",
                    parentId: "A0000",
                }, ...ok.data])
            }
        })
    }, []);
    //搜索
    let [proName, setproName] = useState('');
    let [title, settitle] = useState('');
    //表格数据
    let [pageNum, setPageNum] = useState(1);
    let [contentLen, setcontentLen] = useState(0);
    let [queryparams, setqueryparams] = useState<getProjectList>({ isAsc: 'desc', pageNum: 1, pageSize: 20, } as unknown as getProjectList);
    let [tab, settab] = useState(0);
    useEffect(() => {
        let queryParams: getProjectList = {} as getProjectList;
        queryParams = { ...queryParams, isAsc: 'desc', pageNum: pageNum, pageSize: 20, proType: curTypes, specialtyTag: curSkill, industryTag: IndustryActive, proName, orderByColumn: tab == 1 ? "project.publishtime " : "project.stucount" };
        getList(queryParams).then(ok => {
            setcontentLen(ok.total)
        })
        projectKu.getProjectKuList(queryParams)
    }, [curTypes, curSkill, IndustryActive, proName, pageNum, tab]);
    //状态
    function setFlag(index1: number, favoritesInd: boolean) {
        projectKu.projectKuList.forEach((item, index) => {
            if (index == index1) {
                item.favoritesInd = !favoritesInd
                item.favoritesInd ? (item.favorCount as number) += 1 : (item.favorCount as number) -= 1
            }
        })
    };
    const success = () => {
        message.success('项目收藏成功');
    };
    const error = () => {
        message.error('取消收藏项目成功');
    };
    return <div className={styles.project}>
        <div className={styles.box}>
            <div className={styles.title}>
                <div className={styles.t2}>
                    <p>实训类型:</p>
                    <p>
                        {
                            type.map((item, index) => {
                                return <span key={index}
                                    className={item.sxType == curTypes ? styles.active : ''}
                                    onClick={() => {
                                        setcurTypes(item.sxType as any)
                                    }}
                                >{item.name}</span>
                            })
                        }
                    </p>
                </div>
                <div className={styles.t3}>
                    <p>行业:</p>
                    <p>
                        {
                            curIndustry.map((item, index) => {
                                return <span key={index}
                                    className={item.value == IndustryActive ? styles.active : ''}
                                    onClick={() => {
                                        setIndustryActive(item.value)
                                    }}
                                >{item.label}</span>
                            })
                        }
                    </p>
                </div>
                <div className={styles.t1}>
                    <p>专业:</p>
                    <p>
                        {
                            skillLabel.map((item, index) => {
                                return <span key={index}
                                    className={item.id == curSkill ? styles.active : ''}
                                    onClick={() => {
                                        setCurSkill(item.id)
                                    }}
                                >{item.name}</span>
                            })
                        }
                    </p>
                </div>
            </div>
            <div className={styles.bottom}>
                <div className={styles.search}>
                    <p>
                        {
                            arr.map((item, index) => {
                                return <span key={index}
                                    className={index == tab ? styles.active : ''}
                                    onClick={() => {
                                        settab(index)
                                    }}>{item}</span>
                            })
                        }
                    </p>
                    <Input placeholder="搜索项目" className={styles.input} value={title} onChange={(e) => settitle(e.target.value)} onKeyDown={(e) => {
                        if (e.keyCode === 13) {
                            setproName(title)
                        }
                    }} />
                </div>
                <div className={styles.content}>
                    {
                        projectKu.projectKuList.map((item, index) => {
                            return <div key={index} className={styles.td} onClick={() => {
                                history.replace(`/students/projectDetail?id=${item.id}&versionId=${item.versionId}`)
                            }}>
                                <img src={`http://111.203.59.61:8060${item.pictureUrl}`} />
                                <p className={styles.td1}>
                                    <span>{item.name}</span>
                                    <span className={styles.span}>{item.description}</span>
                                </p>
                                <p className={styles.num}>
                                    <span style={{ fontSize: 16, marginRight: 10 }}><FormOutlined /> {item.stuCount}</span>
                                    <span style={{ fontSize: 16, marginRight: 10 }}><StarOutlined />{item.favorCount}</span>
                                    <span style={{ color: "red", fontSize: 16, marginRight: 10 }}>{item.sxType == '1' ? '生产实训' : ''}</span>
                                    <span style={{ color: '#FF8D41', fontSize: 16, marginRight: 10 }}>{item.sxType == '2' ? '教学实训' : ''}</span>
                                    <span style={{ color: '#8183F1', fontSize: 16, marginRight: 10 }}>{item.sxType == '3' ? '专业群实训' : ''}</span>
                                </p>
                                <p className={styles.like}>
                                    <StarOutlined
                                        onClick={(e) => {
                                            setFlag(index, item.favoritesInd)
                                            item.favoritesInd ? success() : error()
                                            e.stopPropagation()
                                        }} className={item.favoritesInd ? styles.active1 : ''} /></p>
                            </div>
                        })
                    }
                </div>
                <div className={styles.page}>
                    <Pagination
                        defaultCurrent={1}
                        onChange={(e) => { setPageNum(e) }}
                        total={contentLen} size="default"
                        showSizeChanger showQuickJumper pageSize={20} pageSizeOptions={["10"]} />
                </div>
            </div>
        </div>
    </div>
};
export default observer(projectKu)